<template>
    <div class="modal_frame_wrapper flex-column">
        <svg-icon class="part" icon="screen_module_part"/>
        <div class="frame_wrapper flex-column">
            <div class="header flex-row" v-if="name">
                <svg-icon class="icon" icon="screen_arrow"/>
                <p class="label">{{ name }}</p>
                <span class="more">
                    <slot name="more"></slot>
                </span>
            </div>
            <slot/>
        </div>
    </div>
</template>
<script>
export default {
    name:'ModalFrame',
    props:{
        name:{
            type:String,
            default:'测试标题'
        }
    },
    data(){
        return{

        }
    }
}
</script>
<style lang="scss" scoped>
.modal_frame_wrapper{
    position: relative;
    width: 100%;
    justify-content: flex-start;
    margin-bottom: 2vh;
    .part{
        display: flex;
        margin-left: 2vw;
        width: 8vw;
        height: .2vw;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .frame_wrapper{
        flex: 1;
        padding: 12px;
        border: 2px solid #1786EF;
        border-radius: 12px;
        box-sizing: border-box;
        .header{
            .icon{
                width: 1vw;
                height: 1.2vw;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .label{
                flex: 1;
                // margin-top: -.3vh;
                font-size: .3em;
                line-height: 1;
                color: #17E2EF;
            }
            .more{
                font-size: 12px;
                color: #fff;
                cursor: pointer;
            }
        }
    }
}
</style>